{include file="public/layout" /}
<body class="bodystyle">
<div id="toolTipLayer" style="position: absolute; z-index: 9999; display: none; visibility: visible; left: 95px; top: 573px;"></div>
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
<div class="page min-hg-c-i">
    <form class="form-horizontal" id="post_form" action="{:url('Field/arctype_edit')}" method="post">
        <!-- 常规选项 -->
        <div class="ncap-form-default tab_div_1">
            <dl class="row">
                <dt class="tit">
                    <label for="title"><em>*</em>字段名称</label>
                </dt>
                <dd class="opt">
                    <input type="text" value="{$info.title|default=''}" name="title" id="title" class="input-txt">
                    <p class="notic"></p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="name"><em>*</em>字段标识</label>
                </dt>
                <dd class="opt">
                    <input type="text" value="{$info.name|default=''}" name="name" id="name" placeholder="支持字母、数字和下划线，不能和别的标识值相同" class="input-txt" onkeyup="this.value=this.value.replace(/[^0-9a-zA-Z_]/g,'');" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^0-9a-zA-Z_]/g,''));">
                    <p class="notic">保持唯一性，不可与主表、附加表重复</p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="dtype"><em>*</em>数据类型</label>
                </dt>
                <dd class="opt">
                    {volist name='$fieldtype_list' id='vo'}
                        <div style="width: 150px; float: left;">
                            <label {if condition="!in_array($vo['name'], $info['allowed_dtype'])"} title="不支持更改此类型" {/if}><input type="radio" name="dtype" value="{$vo.name}" data-ifoption="{$vo.ifoption|default=0}" {eq name="$info.dtype" value="$vo.name"} checked="checked" {/eq} data-text="{$vo.title}" {if condition="!in_array($vo['name'], $info['allowed_dtype'])"} disabled="true" {/if}>{$vo.title}</label>&nbsp;
                        </div>
                        {if condition="$i % 4 == 0"}<br/>{/if}
                    {/volist}
                    <input type="hidden" name="old_dtype" value="{$info.dtype}">
                    <span class="err"></span>
                    <p class="notic"></p>
                </dd>
            </dl>
            <!-- 选项参数[默认值列表] start -->        
            <dl class="row {if !in_array($info['dtype'], ['checkboxs','radios','selects'])} none {/if}" id="checkboxs-item">
                <dt class="tit">
                    <label for="mcheck">选项参数</label>
                </dt>
                <dd class="opt">
                    <a href="JavaScript:void(0);" class="ncap-btn ncap-btn-green" onClick="addMcheckHtml(this);" data-id="{$info.id}">新增</a>
                    <div class="" style="margin-top: 15px;width: 650px;">
                        <div class="flexigrid">
                            <div class="hDiv">
                                <div class="hDivBox">
                                    <table cellspacing="0" cellpadding="0" style="width: 100%;">
                                        <thead>
                                            <tr>
                                                <th abbr="article_title" axis="col3" class="">
                                                    <div style="text-align: left; padding-left: 10px;" class="">默认值</div>
                                                </th>                                            
                                                <th abbr="article_time" axis="col4" class="w80">
                                                    <div class="tc">排序</div>
                                                </th>
                                                <th abbr="article_time" axis="col6" class="w60">
                                                    <div class="tc">操作</div>
                                                </th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                                <div class="bDiv" style="height: auto;">
                                    <div id="flexigrid" cellpadding="0" cellspacing="0" border="0">
                                        <table style="width: 100%;">
                                            <tbody id="mcheck_template">
                                                {volist name="$info[$info['name']]" id='v'} 
                                                <tr class="tr" id="mcheck_tr_{$v['id']}" data-id="{$v['id']}">
                                                    <input type="hidden" name="mcheck[{$v['id']}][id]" value="{$v.id}">
                                                    <td style="width: 100%">
                                                        <div style="">
                                                            <input type="text" class="mcheck-inp" name="mcheck[{$v['id']}][dfvalue]" value="{$v.dfvalue}" style="width: 90%;" autocomplete="off">
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="w80 tc">
                                                            <input type="text" name="mcheck[{$v['id']}][sort_order]" value="{$v.sort_order}" style="width: 50px;text-align: center;" value="100" autocomplete="off">
                                                        </div>
                                                    </td>
                                                    <td class="">
                                                        <div class="w60 tc">
                                                            <a class="btn red" href="javascript:void(0);" data-id="mcheck_tr_{$v['id']}" data-rid="{$v['id']}" onclick="DelMcheckHtml(this)">删除</a>
                                                        </div>
                                                    </td>
                                                </tr>
                                                {/volist}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="notic2 pt5">此选项改动或增加默认值，将不会对栏目内已保存数据做改变</p>
                </dd>
            </dl>            
            <!-- 选项参数[默认值列表] end -->
            <dl class="row {if in_array($info['dtype'], ['checkboxs','radios','selects'])} none {/if}" id="dl_dfvalue">
                <dt class="tit">
                    <label id="label_dfvalue">默认值</label>
                </dt>
                <dd class="opt">
                    <textarea rows="5" cols="60" id="dfvalue" name="dfvalue" placeholder="如果定义字段类型为下拉框、单选项、多选项时，此处填写被选择的项目(用“,”分开，如“男,女,人妖”)。" style="height:60px;">{$info.dfvalue|default=''}</textarea>
                    <textarea rows="5" cols="60" name="old_dfvalue" style="display: none;">{$info.dfvalue|default=''}</textarea>
                    <span class="err"></span>
                    <p class="notic">1、如果定义字段类型为下拉框、单选项、多选项时，默认值为必填项，不支持反斜杠 \ ，可以用斜杠 / 代替。<br/>2、特殊符号会被过滤掉，比如：&、=、?等<br/>3、定义字段类型为多选项时，默认值最多为64项，超出则截取前64项</p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label>提示文字</label>
                </dt>
                <dd class="opt">          
                    <textarea rows="5" cols="60" id="remark" name="remark" placeholder="问号提示文字" style="height:60px;">{$info.remark|default=''}</textarea>
                    <span class="err"></span>
                    <p class="notic">问号提示文字</p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="title" id="select_title">指定栏目</label>
                </dt>
                <dd class="opt">
                    <select name="typeids[]" id="typeid" style="width: 300px;" size="15" multiple="true">
                        <option value="0" {if condition="in_array(0, $typeids) || empty($typeids)"} selected="true" {/if}>—指定所有栏目—</option>
                        {$select_html}
                    </select>
                    <span class="err"></span>
                    <p class="red">(按 Ctrl 可以进行多选)</p>
                </dd>
            </dl>
<!--             <dl class="row">
                <dt class="tit">
                    <label for="sort_order">排序</label>
                </dt>
                <dd class="opt">
                    <input type="text" value="{$info.sort_order|default=100}" name="sort_order" id="sort_order" class="input-txt">
                    <p class="notic">越小越靠前</p>
                </dd>
            </dl> -->
        </div>
        <!-- 常规选项 -->
        <div class="ncap-form-default">
            <div class="bot">
                <input type="hidden" name="channel_id" id="channel_id" value="{$info.channel_id|default='-99'}">
                <input type="hidden" name="id" id="id" value="{$info.id|default=''}">
                <input type="hidden" name="old_name" id="old_name" value="{$info.name|default=''}">
                <a href="JavaScript:void(0);" onclick="check_submit();" class="ncap-btn-big ncap-btn-green" id="submitBtn">确认提交</a>
            </div>
        </div> 
    </form>
</div>
<script type="text/javascript">
    $(function(){
        dtype_change($('input[name=dtype]:checked'));
        $('input[name=dtype]').click(function(){
            dtype_change(this);
        });

        function dtype_change(obj) {
            var dtype = $(obj).val();
            var ifoption = $(obj).data('ifoption');
            $('#checkboxs-item').hide()
            if (0 <= $.inArray(dtype, ['datetime','switch','img','imgs','file','files','media','checkboxs','radios','selects'])) {
                $('#dl_dfvalue').hide();
                if (0 <= $.inArray(dtype, ['checkboxs','radios','selects'])) {
                    $('#checkboxs-item').show();
                }
            } else {
                $('#dl_dfvalue').show();
            }
            if (1 == ifoption) {
                $('#label_dfvalue').html('<em>*</em>默认值');
            } else {
                $('#label_dfvalue').html('默认值');
            }
        }
    });

    var parentObj = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    function check_submit(){
        var allFilled = true;
        if($('input[name="title"]').val() == ''){
            showErrorMsg('字段标题不能为空！');
            $('input[name=title]').focus();
            return false;
        }
        var name = $('input[name="name"]').val();
        var ret1 = /^[_]+$/;
        var ret2 = /^[\w]+$/;
        var ret3 = /^[0-9]+$/;
        if (ret1.test(name) || !ret2.test(name)) {
            showErrorMsg('字段名称格式不正确！');
            $('input[name=name]').focus();
            return false;
        } else if (ret3.test(name)) {
            showErrorMsg('字段名称不能纯数字！');
            $('input[name=name]').focus();
            return false;
        }
        if($('input[name=dtype]:checked').val() == ''){
            showErrorMsg('请选择字段类型！');
            $('input[name=dtype]').focus();
            return false;
        } else {
            var ifoption = $('input[name=dtype]:checked').data('ifoption');
            if (1 == ifoption) {
                if ($.trim($('#dfvalue').val()) == '') {
                    showErrorMsg('默认值不能为空！');
                    $('#dfvalue').focus();
                    return false;
                }

                var tag = '|';
                if($('#dfvalue').val().indexOf(tag) != -1){
                    showErrorMsg('默认值不能输入 | 符号！');
                    $('#dfvalue').focus();
                    return false;
            　　}
            }
            
            if (0 <= $.inArray($('input[name=dtype]:checked').val(), ['radio','checkbox','select'])) {
                var dfvalue = $.trim($('#dfvalue').val());
                if(dfvalue.indexOf('\\') != -1){
               　　  showErrorMsg('默认值不支持反斜杠 \\ ，可用斜杠 / 代替');
                    $('#dfvalue').focus();
                    return false;
            　　}
                data = dfvalue.split(',');
                for(var i = 0;i < data.length ;i++) {
                    for(var j = i+1;j < data.length;j++) {
                        if ($.trim(data[i]) == $.trim(data [j])){
                            showErrorMsg('默认值不能含有相同的值！');
                            $('#dfvalue').focus();
                            return false;
                        }
                    }
                }
                if (0 <= $.inArray($('input[name=dtype]:checked').val(), ['checkbox'])) {
                    if (64 < data.length) {
                        showErrorMsg('默认值最多填写64项！');
                        $('#dfvalue').focus();
                        return false;
                    }
                }
            } else if (0 <= $.inArray($('input[name=dtype]:checked').val(), ['checkboxs','radios','selects'])) {
                if ($(".mcheck-inp").length == 0) {
                    showErrorMsg('请新增选项参数！');
                    return false;
                }
                $(".mcheck-inp").each(function () {
                    if (!$.trim($(this).val())) {
                        allFilled = false;
                        showErrorMsg('选项参数不能为空！');
                        $(this).css("border", "1px solid red");
                    } else {
                        $(this).css("border", "");
                    }
                });
            }
        }
        if(allFilled){  
            layer_loading('正在处理');
            $.ajax({
                type : 'post',
                url : "{:url('Field/arctype_edit', ['_ajax'=>1])}",
                data : $('#post_form').serialize(),
                dataType : 'json',
                success : function(res){
                    layer.closeAll();
                    if(res.code == 1){
                        var _parent = parent;
                        _parent.layer.close(parentObj);
                        _parent.layer.msg(res.msg, {shade: layer_shade, time: 1000}, function(){
                            _parent.window.location.reload();
                        });
                    }else{
                        showErrorMsg(res.msg);
                    }
                },
                error: function(e){
                    layer.closeAll();
                    layer.alert(e.responseText, {icon: 5, title:false});
                }
            });
        }
    }

    // 新增选项参数
    function addMcheckHtml(obj) {
        // 获取 id 为 mcheck_template 的元素
        let template = document.getElementById('mcheck_template');
        // 获取该元素下的所有 tr 元素
        let trs = template.querySelectorAll('tr');
        let maxDataId = 0;
        // 遍历 tr 元素
        for (let i = 0; i < trs.length; i++) {
            let tr = trs[i];
            // 获取 tr 的 data-id 属性值
            let dataId = tr.getAttribute('data-id');
            // 将 data-id 属性值转换为数字
            dataId = parseInt(dataId);
            if (!isNaN(dataId)) {
                // 比较并更新最大值
                if (dataId > maxDataId) {
                    maxDataId = dataId;
                }
            }
        }
        var id = maxDataId + 1;
        var html = [
            '<tr class="tr" id="mcheck_tr_'+id+'" data-id="'+id+'"><input type="hidden" name="mcheck['+id+'][id]" value="">'+
            '<td style="width: 100%"><div style="">'+
            '<input type="text" name="mcheck['+id+'][dfvalue]" class="mcheck-inp" value="" style="width: 90%;" autocomplete="off"></div></td><td>'+                    
            '<div class="w80 tc"><input type="text" name="mcheck['+id+'][sort_order]" value="100" style="width: 50px;text-align: center;" value="100"></div></td>'+
            '<td class=""><div class="w60 tc">'+                    
            '<a class="btn red" href="javascript:void(0);" data-id="mcheck_tr_'+id+'" data-rid="0" onclick="DelMcheckHtml(this,'+id+')">删除</a></div></td></tr>'
        ];
        $('#mcheck_template').append(html);
        // 覆盖当前评价框最大ID
        $(obj).attr('data-id', id);
    }

    // 删除选项参数
    function DelMcheckHtml(obj,id) {
        var rid = $(obj).attr('data-rid');
        if(rid > 0){
            layer.confirm('确定永久删除吗？', {
              btn: ['确定','取消'] //按钮
            }, function(){                     
                layer_loading('正在处理');
                $.ajax({
                    type : 'post',
                    url : "{:url('field/del_fieldCustomParam')}",   
                    data:{rid:rid},                 
                    dataType : 'json',
                    success : function(res){
                        layer.closeAll();
                        if(res.code == 1){
                            layer.msg(res.msg, {time: 2000},function(){
                                window.location.reload();
                            });
                        }else{
                            showErrorMsg(res.msg);
                        }
                    },
                    error: function(e){
                        layer.closeAll();
                        showErrorAlert(e.responseText);
                    }
                });                
            }, function(){            
            }); 
        }else{
            $('#mcheck_tr_' + id).remove();
        }
    }
</script>

{include file="public/footer" /}